import QtQuick
import Qt.labs.qmlmodels
import QtQuick.Controls 6.2

Rectangle {
    id: root
    width: 800
    height: 600
    color: "green"

    property var tableHeadData: ["name", "color", "address"]
    property var tableCellWidth: [200, 200, 100]
    property bool autoWidth: true
    property int wordWidth: 18
    property int tableCellHeight: 30
    property int cellPadding: 10

    property int modifyLineNo: -1
    property int modifyStartPos: 0

    function calcCellWidth() {
        if (autoWidth) {
            var res = []
            for (var i = 0; i < tableHeadData.length; i++) {
                res.push(tableHeadData[i].length * wordWidth)
            }
            return res
        } else {
            return tableCellWidth
        }
    }

    property var realTableCellWidth: calcCellWidth()

    function calcTotalCellWidth() {
        let re = 0
        let arr = realTableCellWidth
        for (var i = 0; i < arr.length; i++) {
            re = re + arr[i]
        }
        return re
    }

    function getTableCellWidth(n) {
        return realTableCellWidth[n]
    }

    function getTableCellHeight(n) {
        return tableCellHeight
    }



    Row {
        id: header
        z: 0

        Repeater {
            model: tableHeadData
            Rectangle {
                width: realTableCellWidth[index]
                height: tableCellHeight
                color: "red"
                border.color: "black"
                border.width: 1

                Text {
                    anchors.centerIn: parent
                    text: tableHeadData[index]
                    padding: cellPadding
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    font.pixelSize: wordWidth
                    color: "white"
                }

                MouseArea {
                    id: mouseArea
                    anchors.fill: parent
                    hoverEnabled: true

                    onPositionChanged: mouse => {
                                           // 获取鼠标位置相对于父元素的位置
                                           var mouseX = mouse.x
                                           var mouseY = mouse.y

                                           // 获取父元素的边界信息
                                           var parentWidth = parent.width
                                           var parentHeight = parent.height

                                           // 定义边缘触发的距离
                                           var edgeDistance = 10

                                           // 检查鼠标是否位于父元素的边缘
                                           var isLeftEdge = mouseX <= edgeDistance
                                           var isRightEdge = mouseX >= parentWidth - edgeDistance
                                           var isTopEdge = mouseY <= edgeDistance
                                           var isBottomEdge = mouseY >= parentHeight - edgeDistance

                                           // 打印边缘状态
                                           if (isRightEdge) {
                                               //Qt.ArrowCursor;
                                               mouseArea.cursorShape = Qt.CrossCursor
                                           }

                                           //console.log("Right edge:", isRightEdge)
                                       }

                    onPressed: {

                        if (mouse.button === Qt.LeftButton) {
                            // 获取鼠标位置相对于父元素的位置
                            var mouseX = mouse.x
                            var mouseY = mouse.y
                        }
                    }
                }
            }
        }
    }



    TableView {
        id: tableview
        width: calcTotalCellWidth()
        height: root.height-tableCellHeight
        anchors.left: header.left
        anchors.top: header.top
        anchors.topMargin: tableCellHeight
        //anchors.horizontalCenter: parent.horizontalCenter
        clip: true // clip content to table dimensions
        //boundsBehavior: Flickable.StopAtBounds
        reuseItems: false // forces table to destroy delegates
        columnSpacing: 0 // in case of big/row spacing, you need to take care of width/height providers (to get along with it)

        //rows: tableHeadData.length
        model: TableModel {
            TableModelColumn {
                display: "name"
            }
            TableModelColumn {
                display: "color"
            }
            TableModelColumn {
                display: "address"
            }
            rows: [{
                    "name": "cat",
                    "color": "black",
                    "address": "wgfdsdgff"
                }, {
                    "name": "dog",
                    "color": "brown",
                    "address": "gweddgff"
                }, {
                    "name": "bird",
                    "color": "white",
                    "address": "dfwerfwef"
                }]
        }



        delegate: Rectangle {
            implicitWidth: realTableCellWidth[column]
            implicitHeight: tableCellHeight
            border.width: 1

            Text {
                anchors.centerIn: parent
                text: display
                padding: cellPadding
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: wordWidth
            }
        }
    }
}
